<!--
 * @Description: 客户详情抽屉组件 - 显示客户的详细信息
 * @Author: lujq
 * @Date: 2024-12-21
 * @LastEditors: lujq
 * @LastEditTime: 2024-12-21 16:30:00
-->
<template>
  <el-drawer
    v-model="visible"
    title="客户详细信息"
    :size="'60%'"
    direction="rtl"
    :before-close="handleClose"
  >
    <div v-if="customer" class="customer-detail">
      <!-- 基本信息 -->
      <el-card class="detail-section" shadow="never">
        <template #header>
          <div class="section-header">
            <el-icon><User /></el-icon>
            <span>基本信息</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <label>客户姓名：</label>
              <span>{{ customer.name }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>公司名称：</label>
              <span>{{ customer.company }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>客户类型：</label>
              <el-tag
                :type="customer.customerType === 'enterprise' ? 'success' : 'info'"
                size="small"
              >
                {{ customer.customerType === 'enterprise' ? '企业客户' : '个人客户' }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>联系电话：</label>
              <span>{{ customer.phone }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>邮箱地址：</label>
              <span>{{ customer.email }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>客户等级：</label>
              <el-tag :type="getLevelType(customer.level)">
                {{ getLevelText(customer.level) }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="info-item">
              <label>联系地址：</label>
              <span>{{ customer.address }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 公司信息 -->
      <el-card class="detail-section" shadow="never" v-if="customer.customerType === 'enterprise'">
        <template #header>
          <div class="section-header">
            <el-icon><House /></el-icon>
            <span>公司信息</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <label>所属行业：</label>
              <span>{{ customer.industry || '暂无' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>公司规模：</label>
              <span>{{ customer.companySize || '暂无' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>法人代表：</label>
              <span>{{ customer.legalPerson || '暂无' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>注册资本：</label>
              <span>{{ customer.registeredCapital || '暂无' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>成立日期：</label>
              <span>{{ customer.establishedDate || '暂无' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>信用等级：</label>
              <el-tag :type="getCreditType(customer.creditRating || '')">
                {{ customer.creditRating || '暂无' }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <label>营业执照：</label>
              <span>{{ customer.businessLicense || '暂无' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <label>税务登记号：</label>
              <span>{{ customer.taxNumber || '暂无' }}</span>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="info-item">
              <label>公司网站：</label>
              <span>{{ customer.website || '暂无' }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 业务信息 -->
      <el-card class="detail-section" shadow="never">
        <template #header>
          <div class="section-header">
            <el-icon><DataAnalysis /></el-icon>
            <span>业务信息</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-value">{{ customer.totalOrders || 0 }}</div>
              <div class="stat-label">总订单数</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-value">¥{{ formatAmount(customer.totalAmount || 0) }}</div>
              <div class="stat-label">总消费金额</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-value">{{ customer.lastOrderDate || '暂无' }}</div>
              <div class="stat-label">最后下单日期</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-value">{{ customer.salesManager || '暂无' }}</div>
              <div class="stat-label">销售经理</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-value">{{ customer.paymentTerms || '暂无' }}</div>
              <div class="stat-label">付款方式</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-value">{{ customer.lastContactDate || '暂无' }}</div>
              <div class="stat-label">最后联系</div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="info-item">
              <label style="margin-bottom: 5px">偏好产品：</label>
              <div class="preferred-products">
                <el-tag
                  v-for="product in customer.preferredProducts || []"
                  :key="product"
                  class="product-tag"
                  type="success"
                  size="small"
                >
                  {{ product }}
                </el-tag>
                <span v-if="!customer.preferredProducts || customer.preferredProducts.length === 0"
                  >暂无</span
                >
              </div>
            </div>
          </el-col>
          <el-col :span="24" v-if="customer.remark">
            <div class="info-item">
              <label>备注信息：</label>
              <span>{{ customer.remark }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <template #footer>
      <div class="drawer-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="handleEdit">
          <el-icon><Edit /></el-icon>
          编辑客户
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { User, Edit, House, DataAnalysis } from '@element-plus/icons-vue'
import type { Customer } from '@/types'

// Props
interface Props {
  modelValue: boolean
  customer: Customer | null
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  customer: null,
})

// Emits
interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'edit', customer: Customer): void
}

const emit = defineEmits<Emits>()

// Computed
const visible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit('update:modelValue', value),
})

// Methods
const handleClose = () => {
  visible.value = false
}

const handleEdit = () => {
  if (props.customer) {
    emit('edit', props.customer)
  }
}

// 工具函数
const getLevelText = (level: string) => {
  const levelMap: Record<string, string> = {
    diamond: '钻石客户',
    gold: '黄金客户',
    silver: '白银客户',
    bronze: '青铜客户',
  }
  return levelMap[level] || '未知等级'
}

const getLevelType = (level: string) => {
  const typeMap: Record<string, string> = {
    diamond: 'danger',
    gold: 'warning',
    silver: 'info',
    bronze: 'success',
  }
  return typeMap[level] || 'info'
}

const getCreditType = (rating: string) => {
  const typeMap: Record<string, string> = {
    AAA: 'success',
    AA: 'success',
    A: 'warning',
    B: 'info',
    C: 'danger',
  }
  return typeMap[rating] || 'info'
}

const formatAmount = (amount: number) => {
  return amount.toLocaleString('zh-CN', {
    minimumFractionDigits: 0,
    maximumFractionDigits: 2,
  })
}
</script>

<style scoped>
.customer-detail {
  padding: 0;
}

.detail-section {
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.info-item {
  margin-bottom: 16px;
}

.info-item label {
  display: inline-block;
  width: 100px;
  font-weight: 500;
  color: #606266;
  margin-right: 8px;
}

.info-item span {
  color: #303133;
}

.stat-card {
  text-align: center;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #409eff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #909399;
}

.preferred-products {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-tag {
  margin: 0;
}

.drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stat-card {
    padding: 12px;
  }

  .stat-value {
    font-size: 20px;
  }

  .info-item label {
    width: 80px;
  }
}
</style>
